<template>
	<div class="index" >
    <div class="flexbc" style="margin-bottom: 20px; width: 100%;">
      <div style="font-size: 18px; font-weight: bold;">个人基本信息</div>
      <div v-if="!xiugaiing"><el-button type="primary" @click="xiugaikai()" >开始信息修改</el-button></div>
      <div v-if="xiugaiing"><el-button type="danger" @click="xiugaikai()">关闭信息修改</el-button></div>
    </div>

    <div class="flexbc" style="margin-bottom: 20px;">
      <div style="width: 700px; color: #666; font-size: 14px; ">
        <div style="padding: 5px 10px;">· 请注意您在此输入的个人信息将会自动显示在您的报名表和准考证上。</div>
        <div style="padding: 5px 10px;">· 确保这些信息的完整、真实和准确是您的责任。</div>
        <div style="padding: 5px 10px;">· 请特别注意您的身份证件,如果您的证件在考试前将过期,请申请新的身份证件后再进行注册。</div>
        <div style="padding: 5px 10px;">· 在提交此页面后,您将不能修改以下信息:姓名(包括中文姓名和拼音)性别证件类型和证件号码生日</div>
        <div style="padding: 5px 10px;">· 部分注册信息会提交德国奥德欧标德语考试院,这将直接景响您是否能成功报考,请务必认真填写。</div>
      </div>
      <div class="flexcc">
        <chuantu @getimgid="getimgid3" :imgid="all.headimg" v-if="relo" :zi="'上传照片'" style="width: 200px; height: 200px;"></chuantu>
      </div>
    </div>

    <div class="flex">
      <div style="padding: 5px 10px;" class="flexc"><div style="width: 120px; text-align: right; margin-right: 30px;">姓(中文):</div><el-input v-model="all.prename_cn" :disabled="!xiugaiing" style="width: 250px; " @input="change1()" placeholder="请输入内容"></el-input></div>
      <div style="padding: 5px 10px;" class="flexc"><div style="width: 120px; text-align: right; margin-right: 30px;">名(中文):</div><el-input v-model="all.name_cn" :disabled="!xiugaiing" style="width: 250px; " @input="change1()" placeholder="请输入内容"></el-input></div>

    </div>
    <div class="flex">
      <div style="padding: 5px 10px;" class="flexc"><div style="width: 120px; text-align: right; margin-right: 30px;">姓(英文/全拼):</div><el-input v-model="all.prename_eng" disabled style="width: 250px; " placeholder="请输入内容"></el-input></div>
      <div style="padding: 5px 10px;" class="flexc"><div style="width: 120px; text-align: right; margin-right: 30px;">名(英文/全拼):</div><el-input v-model="all.name_eng" disabled style="width: 250px; " placeholder="请输入内容"></el-input></div>
    </div>
    <div style="padding: 5px 10px; color: #999; font-size: 14px;">(例如:姓名:王小刚,则应输入 姓:王;名:小刚。)</div>

    <div style="padding: 5px 10px;" class="flexc">
        <div style="width: 120px; text-align: right; margin-right: 30px;">性别:</div>
        <div>
          <el-radio v-model="all.sex" :disabled="!xiugaiing" label="1">男</el-radio>
          <el-radio v-model="all.sex" :disabled="!xiugaiing" label="2">女</el-radio>
        </div>
    </div>

    <div style="padding: 5px 10px;" class="flexc"><div style="width: 120px; text-align: right; margin-right: 30px;">出生日期:</div>
      <el-date-picker v-model="all.birth" :disabled="!xiugaiing" type="date" value-format="yyyy-MM-dd" style="width: 250px;" placeholder="选择时间"> </el-date-picker>
    </div>

    <div style="padding: 5px 10px;" class="flexc">
      <div style="width: 120px; text-align: right; margin-right: 30px;">出生地:</div>
      <el-input v-model="all.birthadr" :disabled="!xiugaiing" style="width: 250px; " placeholder="请输入出生地"></el-input>
    </div>

    <div style="padding: 5px 10px;" class="flexc">
      <div style="width: 120px; text-align: right; margin-right: 30px;">出生国家:</div>
      <el-select v-model="all.birthcountry" :disabled="!xiugaiing" style="width: 250px;" placeholder="请选择出生国家">
          <el-option :label="item" :value="item" v-for="(item,index) in guojias":key="index"></el-option>
      </el-select>
    </div>
    <div style="padding: 5px 10px;" class="flexc">
      <div style="width: 120px; text-align: right; margin-right: 30px;">国籍:</div>
      <el-select v-model="all.country" :disabled="!xiugaiing" style="width: 250px;" placeholder="请选择国籍">
          <el-option :label="item" :value="item" v-for="(item,index) in guojias":key="index"></el-option>
      </el-select>
    </div>
<!--    <div style="padding: 5px 10px;" class="flexc">
      <div style="width: 120px; text-align: right; margin-right: 30px;">省:</div>
      <el-input v-model="all.name2" :disabled="!xiugaiing" style="width: 250px; " placeholder="请输入省"></el-input>
      <div style="padding: 5px 10px; color: #999; font-size: 14px;">（与户口本一致）</div>
    </div> -->

<!--    <div style="padding: 5px 10px;" class="flexc">
      <div style="width: 120px; text-align: right; margin-right: 30px;">出生地:</div>
      <el-input v-model="all.name2" style="width: 250px; " placeholder="请输入出生地"></el-input>
      <div style="padding: 5px 10px; color: #999; font-size: 14px;">（与户口本一致）</div>
    </div> -->




    <div style="padding: 5px 10px; color: #f00;">证件要求:</div>

    <div style="padding: 5px 10px; font-size: 14px; color: #999;">· 中国大陆考生参加考试必须携带的唯一身份证件是有效的“中华人民共和国居民身份证原件。根据《中华人民共
    和国身份证法》,任何中国公民无论是何年龄,均可向户籍所在派出所申领身份证。特别提醒未申领身份证的青
    少年考生提前办理,以免景响考试。请考生确认所持身份证仍在有效期内、芯片信息读取功能正常、本人当前相
    貌无重大改变(如整容、性别改变等)。否则,建议考生立即重新申请新的身份证。</div>
    <div style="padding: 5px 10px; font-size: 14px; color: #999;">· 中国香港和澳门考生必须携带有效的港典身份证原件或港典居民居住证原件参加考试。</div>
    <div style="padding: 5px 10px; font-size: 14px; color: #999;">· 中国台湾考生必须携带有效的台湾地区居民往来大陆通行证原件或台湾居民居住证原件参加考试。</div>
    <div style="padding: 5px 10px; font-size: 14px; color: #999;">· 非中国籍考生必须携带有效护照原件参加考试。护照明确显示考生的姓名、本人近期照片和签字,并带有中国入
    境签证(中国给予免签证待遇国家的护照除外)和中国边境入境銮章。</div>
    <div style="padding: 5px 10px;" class="flexc">
      <div style="width: 120px; text-align: right; margin-right: 30px;">证件:</div>
      <el-select v-model="all.cardtype" :disabled="!xiugaiing" style="width: 250px;" placeholder="请选择证件类型">
          <el-option label="身份证" value="身份证"></el-option>
          <el-option label="护照" value="护照"></el-option>
      </el-select>
      <el-input v-model="all.cardid" :disabled="!xiugaiing" style="width: 250px; margin-left: 20px;" placeholder="请输入证件号码"></el-input>
    </div>
    <div style="padding: 5px 10px; color: #999; font-size: 14px;">类型和证件号码必须相符，并与参加考试时所持有效证件保持一，请准确写。</div>

    <div class="flexc" style=" padding: 5px 10px;">
      <div style="width: 120px; text-align: right; margin-right: 30px;">身份证/护照正面:</div>
      <div  >
        <chuantu @getimgid="getimgid" :imgid="all.photo1" v-if="relo" :zi="'上传身份证正面'" style="width: 316px; height: 200px;"></chuantu>
      </div>
    </div>
    <div class="flexc" style="padding: 5px 10px;">
      <div style="width: 120px; text-align: right; margin-right: 30px;">身份证/护照反面:</div>
      <div  >
        <chuantu @getimgid="getimgid2" :imgid="all.photo2" v-if="relo" :zi="'上传身份证反面'" style="width: 316px; height: 200px;"></chuantu>
      </div>
    </div>

    <div style="font-size: 18px; margin-bottom: 20px; font-weight: bold;  margin-top: 50px;">报名表信息</div>

    <!-- <div style="padding: 5px 10px;" class="flexc">
      <div style="width: 120px; text-align: right; margin-right: 30px;">居住国家:</div>
      <el-select v-model="all.adr_country" :disabled="!xiugaiing" style="width: 250px;" placeholder="请选择居住国家">
          <el-option :label="item" :value="item" v-for="(item,index) in guojias":key="index"></el-option>
      </el-select>
    </div> -->
    <div style="padding: 5px 10px;" class="flexc">
      <div style="width: 120px; text-align: right; margin-right: 30px;">居住省:</div>
      <el-select v-model="all.provice" :disabled="!xiugaiing" style="width: 250px;" placeholder="请选择居住省">
          <el-option :label="item" :value="item" v-for="(item,index) in shengs":key="index"></el-option>
      </el-select>
    </div>
    <div style="padding: 5px 10px;" class="flexc">
      <div style="width: 120px; text-align: right; margin-right: 30px;">居住市:</div>
      <el-input v-model="all.city" :disabled="!xiugaiing" style="width: 250px; " placeholder="请输入居住市"></el-input>
    </div>

    <!-- <div style="font-size: 18px; margin-bottom: 20px; font-weight: bold;  margin-top: 50px;">联系信息</div> -->
    <div style="padding: 5px 10px;" class="flexc">
      <div style="width: 120px; text-align: right; margin-right: 30px;">通讯地址:</div>
      <el-input v-model="all.address" :disabled="!xiugaiing" style="width: 250px; " placeholder="请输入通讯地址"></el-input>
    </div>
    <div style="padding: 5px 10px;" class="flexc">
      <div style="width: 120px; text-align: right; margin-right: 30px;">邮编:</div>
      <el-input v-model="all.postid" :disabled="!xiugaiing" style="width: 250px; " placeholder="请输入邮编"></el-input>
    </div>
    <div style="padding: 5px 10px;" class="flexc">
      <div style="width: 120px; text-align: right; margin-right: 30px;">电子邮箱:</div>
      <el-input v-model="all.email" :disabled="!xiugaiing" style="width: 250px; " placeholder="请输入电子邮箱"></el-input>
    </div>
    <div style="padding: 5px 10px;" class="flexc">
      <div style="width: 120px; text-align: right; margin-right: 30px;">手机号:</div>
      <el-input v-model="all.phone" :disabled="!xiugaiing" style="width: 250px; " placeholder="请输入手机号"></el-input>
    </div>

    <div style="padding: 5px 10px;"><el-button type="primary" @click="baocun">保存信息</el-button></div>
	</div>
</template>

<script>
  import chuantu from '../../components/chuantu.vue'
	export default {
		name: 'index',
		data() {
			return {
        all:{
          cardtype:"",// 证件类型
          cardid:"",// 证件id
          regtime:"",// 用户注册时间
          email:"",//
          phone:"",// 手机
          pswreset:"",// 是否需要重置密码  1 需要 ，0 不需要
          prename_cn:"",// 中文姓
          name_cn:"",//  中文名
          prename_eng:"",// 英文姓
          name_eng:"",//  英文名
          sex:"",//  性别
          birth:"",// 出生日期
          birthadr:"",// 出生地
          birthcountry:"",//  出生国
          country:"",// 国籍
          address:"",//  邮寄地址
          postid:"",//   邮编
          adr_country:"",// 居住国
          provice:"",//   居住省
          city:"",//   居住城市
          opttime:"",// 最后修改时间
          headimg:"",
          photo1:"",
          photo2:""
        },
        xiugaiing:false,
        guojias:[],
        shengs:[],
        imgurl:"",
        relo:true
			}
		},
    components:{
      chuantu
    },
		created() {
      this.getxiala()
      this.huoqu()
		},
		mounted() {

		},
		methods: {
      
      getimgid:function(val){
        this.all.photo1 = val
      },
      getimgid2:function(val){
        this.all.photo2 = val
      },
      getimgid3:function(val){
        console.log(val)
        this.all.headimg = val
      },

      getxiala:function(){
        axios.post(this.IP_URL+'/getcountrys',{lang:'cn'}).then((response)=>{
          if(response.data.errorcode == 0){
            this.guojias = response.data.data
          } else {
            this.$message.error(response.data.reason);
          }
        })
        axios.post(this.IP_URL+'/getprovices').then((response)=>{
          if(response.data.errorcode == 0){
            this.shengs = response.data.data
          } else {
            this.$message.error(response.data.reason);
          }
        })

      },
      huoqu:function(){
        axios.post(this.IP_URL+'/user/getinfo').then((response)=>{
          if(response.data.errorcode == 0){
            this.all = response.data.data
            this.relo = false
            this.$nextTick(()=>{
              this.relo = true
            })
          } else {
            this.$message.error(response.data.reason);
          }
        })
      },

      baocun:function(){
        axios.post(this.IP_URL+'/user/setinfo',this.all).then((response)=>{
          if(response.data.errorcode == 0){

            axios.post(this.IP_URL+'/user/getinfo').then((response2)=>{
              if(response2.data.errorcode == 0){
                localStorage.setItem('osd_person',JSON.stringify(response.data.data))
                this.$router.push('/kaoshi')
              }
            })

          } else {
            this.$message.error(response.data.reason);
          }
        })
      },

      xiugaikai:function(){
        this.xiugaiing = !this.xiugaiing
      },
      change1:function(){
        this.all.prename_eng = pinyinPro.pinyin(this.all.prename_cn, { toneType: 'none' })
        this.all.name_eng = pinyinPro.pinyin(this.all.name_cn, { toneType: 'none' })
      }
    }
	}
</script>


<style scoped >

</style>
